import React from "react";
import { Form, Input, Select, Button, Typography, Divider } from "antd";

const { TextArea } = Input;
const { Title, Text } = Typography;

// 属性配置面板组件（美化版，使用Ant Design）
export default function ConfigPanel(props) {
    const {
        dataUrl,
        setDataUrl,
        columnDefsStr,
        setColumnDefsStr,
        theme,
        setTheme,
        fetchData,
        themeOptions,
        defaultColumnDefs
    } = props;

    return (
        <div style={{ width: 360, padding: 24, background: '#f7f9fa', borderRight: '1px solid #e5e7eb', boxSizing: 'border-box', height: '100vh', overflowY: 'auto' }}>
            <Title level={4} style={{ marginBottom: 24, color: '#222' }}>属性配置面板</Title>
            <Form layout="vertical">
                <Form.Item label={<Text strong>数据源URL</Text>} style={{ marginBottom: 18 }}>
                    <Input
                        value={dataUrl}
                        onChange={e => setDataUrl(e.target.value)}
                        placeholder="请输入数据源URL"
                        allowClear
                    />
                </Form.Item>
                <Form.Item label={<Text strong>列定义（JSON）</Text>} style={{ marginBottom: 18 }}>
                    <TextArea
                        rows={7}
                        value={columnDefsStr}
                        onChange={e => setColumnDefsStr(e.target.value)}
                        placeholder="请输入列定义JSON"
                        style={{ fontFamily: 'monospace', fontSize: 14 }}
                    />
                </Form.Item>
                <Form.Item label={<Text strong>主题</Text>} style={{ marginBottom: 18 }}>
                    <Select
                        value={theme}
                        onChange={setTheme}
                        options={themeOptions.map(opt => ({ label: opt.label, value: opt.value }))}
                        style={{ width: '100%' }}
                    />
                </Form.Item>
                <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" block onClick={fetchData}>
                        刷新数据
                    </Button>
                </Form.Item>
            </Form>
            <Divider style={{ margin: '24px 0 12px 0' }} />
            <Text type="secondary" style={{ fontSize: 13 }}>列定义示例：</Text>
            <pre style={{ background: '#f4f6f8', padding: 10, borderRadius: 6, fontSize: 13, marginTop: 6, color: '#333', overflowX: 'auto' }}>{JSON.stringify(defaultColumnDefs, null, 2)}</pre>
        </div>
    );
} 